import React from "react";
import "./App.scss";
import "./icon.css";
class App extends React.Component {
  // 商品图片信息的数据
  state = {
    allCheck: true,
    select_num: 0, //已经选中的商品数量
    totalPrice: 0, //总价
    // 商品数据
    products: [
      {
        id: 1,
        product_title: "黑科技分区控温，95%鹅绒抗菌儿童鹅绒被",
        img_url:
          "https://yanxuan-item.nosdn.127.net/50da19cc467b002f15a8eb7a5663408e.png?type=webp&imageView&thumbnail=160x0&quality=75",
        price: 588,
        origin_price: 599,
        num: 1,
        checked: true,
      },
      {
        id: 2,
        product_title: "黑科技分区控温，95%鹅绒抗菌儿童鹅绒被",
        img_url:
          "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2847688470,1181619863&fm=26&gp=0.jpg",
        price: 688,
        origin_price: 799,
        num: 1,
        checked: false,
      },
    ],
  };
  // 商品点击减的函数
  sub = (i) => {
    let products = this.state.products;
    products[i].num--;
    if (products[i].num < 1) {
      products[i].num = 1;
      alert("不能再减了");
    }
    this.setState({
      products: products,
    });
  };
  // 商品点击加的函数
  add = (i) => {
    let products = this.state.products;
    products[i].num++;
    this.setState({
      products: products,
    });
  };
  // 计算总价的函数
  getTotalPrice = () => {
    let totalPrice = 0;
    this.state.products.map((p) => {
      if (p.checked) {
        totalPrice += p.num * p.price;
      }
    });
    return totalPrice;
  };
  // 计算已选数量的函数
  getSelectNum = () => {
    let selecenum = 0;
    this.state.products.map((p) => {
      if (p.checked) {
        selecenum += p.num;
      }
    });
    return selecenum;
  };
  // 商品原点点击事件
  handleCheck = (e) => {
    let { index } = e.currentTarget.dataset;
    let allCheck = true;
    let products = this.state.products;
    products[index].checked = !products[index].checked;
    products.map((p) => {
      if (!p.checked) {
        allCheck = false;
      }
    });
    this.setState({
      products: products,
      allCheck: allCheck,
    });
  };
  // 点击全选的函数
  handleAllcheck = () => {
    let allCheck = !this.state.allCheck;
    let products = this.state.products;
    products.map((p) => {
      p.checked = allCheck;
    });
    this.setState({
      products: products,
      allCheck: allCheck,
    });
  };
  // 只要有一个商品点了选择 下单的背景颜色就变红 如果没有就变灰
  handleBgcolor = () => {
    return this.state.products.some((p) => {
      return p.checked;
    });
  };
  render() {
    return (
      <div className="cart">
        {/* 商品区域 */}
        <div className="cart_list">
          {this.state.products.map((p, index) => {
            return (
              <div className="list_item" key={p.id}>
                <div
                  className="item_left"
                  onClick={this.handleCheck}
                  data-index={index}
                >
                  <i
                    className={
                      "iconfont " +
                      (p.checked ? "icon-xuanzhong" : "icon-xuanzhongyuandian1")
                    }
                  ></i>
                </div>
                <div className="item_mid">
                  <img src={p.img_url} alt="" />
                </div>
                <div className="item_right">
                  <div className="right_top">
                    <h5>{p.product_title}</h5>
                  </div>
                  <div className="right_bottom">
                    <div className="right_price">
                      <span className="price">${p.price}</span>
                      <s className="origin_price">${p.origin_price}</s>
                    </div>
                    <div className="right_btn">
                      <button
                        className="sub"
                        onClick={this.sub.bind(this, index)}
                      >
                        -
                      </button>
                      <span className="num">{p.num}</span>
                      <button
                        className="add"
                        onClick={this.add.bind(this, index)}
                      >
                        +
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
        {/* 下单底部去 */}
        <div className="cart_foot">
          <div className="foot_left" onClick={this.handleAllcheck}>
            <i
              className={
                "iconfont " +
                (this.state.allCheck
                  ? "icon-xuanzhong"
                  : "icon-xuanzhongyuandian1")
              }
            ></i>
          </div>
          <div className="foot_num">已选({this.getSelectNum()})</div>
          <div className="foot_right">
            <div className="foot_right_price">
              <span className="price_top">合计:${this.getTotalPrice()}</span>
              <span className="price_bottom">已优惠:22</span>
            </div>
            <div
              className="right_btn"
              style={
                this.handleBgcolor()
                  ? { backgroundColor: "red" }
                  : { backgroundColor: "#ddd" }
              }
            >
              下单
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default App;
